<template>
  <el-drawer title="查看活动" :visible.sync="isShow" :before-close="closeDrawer" size="1000px">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <div class="dBox">
          <div style="font-size: 18px;color: #111111;font-weight: bolder;">{{ param.name }}</div>
          <div style="font-size: 14px;color: #333333;margin-top: 8px;">活动时间：{{ param.startTime + '~' + param.endTime }}</div>
        </div>
        <div class="property-title">基本信息</div>
        <div class="df_ac">
          <div>
            <span class="key">活动价格：</span>
            <span class="value">{{ param.price }}</span>
          </div>
          <div>
            <span class="key">活动地点：</span>
            <span class="value">{{ param.siteName }}</span>
          </div>
          <div>
            <span class="key">报名人数限制：</span>
            <span class="value"> {{ param.signLimit> 0? param.signLimit + '人' : '不限制' }}</span>
          </div>
          <div>
            <span class="key">报名截止时间：</span>
            <span class="value">{{ param.applyEndTime }}</span>
          </div>
          <div>
            <span class="key">活动奖励积分：</span>
            <span class="value">{{ param.shareIntegral }}</span>
          </div>
          <div v-if="param.cardTypesName" style="width: 100%;">
            <span class="key">会员类型：</span>
            <span class="value">{{ param.cardTypesName }}</span>
          </div>
        </div>
        <div class="line-style" />
        <div class="property-title">详情信息</div>
        <div class="df_ac">
          <div>
            <span class="key">活动主题：</span>
            <span class="value">{{ param.theme }}</span>
          </div>
          <div>
            <span class="key">主办方：</span>
            <span class="value">{{ param.sponsor }}</span>
          </div>
          <div>
            <span class="key">承办方：</span>
            <span class="value">{{ param.organizer }}</span>
          </div>
          <div style="width: 100%;display: flex;">
            <span class="key" style="flex: none;">活动详情：</span>
            <span class="value" v-html="param.info" />
          </div>
        </div>

        <div class="line-style" />
        <div class="property-title">会员折扣</div>
        <div>
          <div>
            <span class="key">折扣类型：</span>
            <span class="value">{{
              param.discountType === "1" ? "自定义折扣" : "默认折扣"
            }}</span>
          </div>
        </div>
        <div v-if="param.discountType === '1'" class="mt20 discount_wrap">
          <div v-for="(item, index) in vipTypes" :key="index" class="discount">
            <span class="key">{{ item.name }}：</span>
            <span class="value">{{ item.value * 10 }}折</span>
          </div>
        </div></el-tab-pane>
      <el-tab-pane label="报名信息" name="second"><div class="property-title">报名人员信息</div>
        <QueryForm
          v-model="filters"
          :query-form-config="queryFormConfig"
          @handleQuery="getList(1)"
          @clear="clear"
        >
          <template #btns>
            <el-button type="primary" :loading="exportLoading" @click="exportExcel">导出</el-button>
          </template>
        </QueryForm>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="姓名"
            min-width="120"
            show-overflow-tooltip
            prop="name"
          />
          <el-table-column
            align="center"
            label="性别"
            min-width="70"
            prop="sex"
          >
            <template slot-scope="scope">
              {{ scope.row.sex == 0 ? "保密" : scope.row.sex == 1 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="出生日期"
            min-width="130"
            prop="birthday"
          />
          <el-table-column
            align="center"
            label="身份证号"
            min-width="150"
            prop="cardNo"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="联系人信息"
            min-width="150"
            prop="memberInfo"
            show-overflow-tooltip
          />
        </el-table>
        <Pagination
          :total="totalCount"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        /></el-tab-pane>
    </el-tabs>

  </el-drawer>
</template>

<script>
import {
  activityQueryForEdit, activityStudentList, activityStudentExcel, cardList
} from '@/api'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
import Pagination from '@/components/paginations'
export default {
  components: {
    QueryForm,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      isShow: false,
      queryFormConfig: {
        formItems: [{
          filed: 'name',
          type: 'input',
          label: '报名人姓名'
        }, {
          filed: 'name',
          type: 'input',
          label: '联系人信息'
        }],
        online: true
      },
      activityId: '',
      list: [],
      totalCount: 0,
      listLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      exportLoading: false,
      filters: {},
      vipTypes: [],
      vipList: [],
      param: {}
    }
  },
  methods: {
    getCardList(e) {
      // 获取卡类型列表
      cardList({
        param: {
          type: ''
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.vipList = res.recordList || []
          this.getDetail(e)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      activityStudentExcel({
        param: { ...filters, activityId: this.activityId }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      // 获取会员列表
      this.listLoading = true
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date())
      }
      activityStudentList({
        pagination,
        param: { ...filters, activityId: this.activityId }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
            if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
              this.getList(Math.ceil(res.totalCount / pagination.rows))
            }
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getDetail(activityId) {
      this.activityId = activityId
      activityQueryForEdit({ param: { activityId }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.clear()
          const param = res.record
          let cardTypesName = ''
          let cardTypeList = []
          const vipList = [...this.vipList]
          if (param.cardTypes) {
            cardTypeList = param.cardTypes.split(',')
          }
          vipList.forEach(t => {
            cardTypeList.forEach(v => {
              if (v === t.id) {
                if (cardTypesName) {
                  cardTypesName = cardTypesName + ',' + t.name
                } else {
                  cardTypesName = t.name
                }
              }
            })
          })
          param.cardTypesName = cardTypesName
          if (res.record.discountType === '1') {
            const vipTypes = []
            const arr = res.record.discountList || []
            const discountmap = res.record.discountMap
            arr.forEach((item) => {
              if (discountmap[item.id]) {
                vipTypes.push({
                  name: item.name,
                  id: item.id,
                  value: discountmap[item.id] || 1
                })
              }
            })
            this.vipTypes = vipTypes
          }
          this.param = param
          this.isShow = true
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;

  >div {
    width: 33.33%;
    margin-bottom: 20px;

    &.img {
      display: flex;
      align-items: center;

      .el-image {
        width: 84px;
          height: 84px;
          display: flex;
          box-sizing: border-box;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          cursor: pointer;
          border: 1px dashed #ccc;
          border-radius: 8px;
          transition: all 0.3s;
      }
    }

    .key {
      color: #666666;
      display: inline-block;
    }
  }
}

.discount_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .key {
    width: 90px;
  }

  .discount {
    width: 33.33%;
    margin-bottom: 20px;
  }
}
.dBox {
  background: #F4F7FC;
  padding: 12px 20px;
  margin-bottom: 20px;
  line-height: 1.5;
}
</style>
